<template>
	<div>
		<Navigation></Navigation>
		<!-- 大图 -->
		<div class="bigimgbox">
			<img src="./img/wedding/wedding.jpg" alt="">
		</div>
		<!-- font图标 -->
		<div class="fontboxs">
			<div class="fontbox">
				<img src="./img/wedding/ico-zchq1.png" alt="">
				<div>个性化定制</div>
				<div class="fontboxtype2">车型丰富，车队一切由您做主</div>
			</div>
			<div class="fontbox">
				<img src="./img/wedding/ico-zchq2.png" alt="">
				<div>放心无忧</div>
				<div class="fontboxtype2">迟到免费，永不缺席</div>
			</div>
			<div class="fontbox">
				<img src="./img/wedding/ico-zchq3.png" alt="">
				<div>多元化套餐</div>
				<div class="fontboxtype2">中高低档套餐任你选择</div>
			</div>
			<div class="fontbox">
				<img src="./img/wedding/ico-zchq4.png" alt="">
				<div>一价全包</div>
				<div class="fontboxtype2">行程为全包价，再无其他任何费用</div>
			</div>

		</div>
		<!-- 我们的优势 -->
		<div class="self">
		     <div class="selftitle">婚车服务流程</div>
			<el-steps :active="4" finish-status="success " align-center>
			  <el-step title="挑选喜爱的婚车" description="我们有专业的客服为您一对一服务，根据您的需求介绍婚车；为您打造独一无二的婚车车队。"></el-step>
			  <el-step title="签署协议" description="选定婚车后，提交婚车订单我们的客服会根据您的行程整理合同；每一个订单都有合同保证，安心使用。"></el-step>
			  <el-step title="支付订单费用" description="签订合同后支付付定金，我们将会根据您的时间提前预留车辆；所有行程费用为全包价，再无任何费用。"></el-step>
			  <el-step title="提供婚庆服务" description="我们会提前两天再次联系您，确定婚车线路，提供婚车服务，司机着装统一，并提前了解线路。 宝马 奥迪 帕萨特 凯美瑞等等不胜枚举。"></el-step>
			</el-steps>
		</div>
		<!-- 车表 -->
		<div class="cartype">
			<div class="cartype1">自选婚车</div>
			<div class="cartype2">多款豪华品质婚车任您挑选</div>
		</div>
	<div class="carlists">
	  <div class="carlist" v-for="el in arr1">
	    <router-link :to="{path:'/yj/detail',query:{'id':el.carid}}">
	      <img :src="el.img[0]" alt="" />
	   </router-link>
	    <div class="type1">{{el.carname}}</div>
	    <div class="type2">{{el.shift}}&nbsp;|&nbsp;乘坐{{el.peopel}}人</div>
	    <div class="type3">￥<span>{{el.price}}</span>元起</div>
	  </div>
	</div>
	

        <!-- 婚庆套餐服务 -->
		<div class="cartypehq">
			<div class="cartypehq1">婚庆套餐服务</div>
			<div class="cartypehq2">精心设计浪漫主题婚车套餐</div>
		</div>
		<div class="carlistshq">
			<div class="carlisthq" v-for="el in arr2">
				<router-link :to="{path:'/yj/detail',query:{'id':el.carid}}">
					 <img :src="el.img[0]" alt="" />
				</router-link>
				<div class="typehq1">{{el.carname}}</div>
				<div class="typehq2">{{el.shift}}&nbsp;|&nbsp;乘坐{{el.peopel}}人</div>
				<div class="typehq3">￥<span>{{el.price}}</span>元起</div>
			</div>
		</div>
		
		<Liucheng></Liucheng>
		<Footer1></Footer1>
	</div>
</template>

<script setup>
	import {ref,
			reactive,
			onBeforeMount,
			getCurrentInstance,
	 
		} from "vue"
	
	
	// 后端数据
	
	 
		let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装
		let arr2=reactive([])
	 
		const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
	  
	  	 onBeforeMount( async()=>{
			 //第一个请求数据
	  	 	let res=await proxy.$axios('/zixuancar') //使用公共配置的$axios进行axios请求
	  	 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
	  	 	//此时会进行代理 转变为http://127.0.0.1:7001/test
	  	 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
			 // console.log(arr1,555)	
			 
			 //处理图片路径问题
			 let VehicleCarArry=[]
			 let aa=[]
			 let bb=[]
			arr1.forEach((el,index)=>{
					VehicleCarArry[index]=el.VehicleCar.split("---")
					aa[index]=VehicleCarArry[index].join('http://localhost:7001')
					bb[index]=aa[index].split(",")
				    el.img=bb[index]
	
			})
			
			//第二个请求数据
			let res2=await proxy.$axios('/hunchecar') //使用公共配置的$axios进行axios请求
			//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
			//此时会进行代理 转变为http://127.0.0.1:7001/test
			 arr2.push(...res2.data) //将请求的数据添加到外部的arr1中
			 // console.log(res2.data,6666)	
			 
			 //处理图片路径问题
			 let VehicleCarArry2=[]
			 let aa2=[]
			 let bb2=[]
			arr2.forEach((el,index)=>{
					VehicleCarArry2[index]=el.VehicleCar.split("---")
					aa2[index]=VehicleCarArry2[index].join('http://localhost:7001')
					bb2[index]=aa2[index].split(",")
				    el.img=bb2[index]
				
			})
			
	  	 })
	  


  
</script>

<style lang="scss" scoped>
     //大图
	.bigimgbox{
		width: 100%;
		  text-align: center;
		  overflow: hidden;
		  img{
			    margin: auto -100%;
			    vertical-align: middle;
		  }
	}
	//font图标
	.fontboxs{
		  width: 1000px;
		  padding: 30px;
		  margin: 0 auto;
		  text-align: center;
		  // background-color: antiquewhite;
		  display: flex;
		  justify-content: space-evenly;
		  .fontbox{
			  width: 150px;
			  img{
				  width: 75px;
				  height: 75px;
			  }
			  div{
				  cursor:default;
				  font-size: 15px
			  }
			  .fontboxtype2{
			  				  font-size: 12px;
			  				  color: #939393;
			  				  margin-top: 5px;
			  }
		  }
	}
	//婚车服务流程
	.self{
		cursor:default;
		margin: 0 auto;
		width: 80%;
		// background-color: antiquewhite;
		text-align: center;
		padding: 20px;
		.selftitle{
			margin: 0 auto;
			// width: 50px;
			height: 50px;
			font-size: 50px;
			padding-bottom: 20px;
			color:#3ac257;
		}
		
        ::v-deep .el-step__title{
			font-size: 25px;
			line-height: 60px;
		}
	}
	//车表描述
    .cartype{
		cursor:default;
		width: 1300px;
		// height: 30px;
		text-align: center;
		font-size: 40px;
		background-color: #faf2f2;
		// color: #3ac257;
		margin: 0 auto;
		line-height: 45px;
		.cartype1{
			color: #ff6a84;
		}
		.cartype2{
			font-size: 14px;
			color: #a5a59d;
		}
	}//车表
	.carlists {
	  background-color: #fafafa;
	  cursor: default;
	  width: 1300px;
	  // height: 2000px;
	  margin: 0 auto;
	  // background-color: #3ac257;
	  flex-wrap: wrap;
	  display: flex;
	  // justify-content: space-between;
	
	  .carlist:hover {
	    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); /* 鼠标悬浮时盒子出现的阴影 */
	    transform: translate(0, -5px); /* 鼠标悬浮时盒子上移10px */
	  }
		//单个车box
	.carlist{
	width: 378px;
	// background-color: aliceblue;
	margin-bottom: 20px;
	margin-left: 40px;
	position: relative;
	border: 1px solid #d5d2d2;
	transition: all 0.3s; /* 上浮这个过程需要的时间 */
			a{  //车img
				img{
					cursor:pointer;
					width: 378px;
					height: 258px;
				}
			}//车辆型号
			.type1{
				margin-left: 10px;
				margin: 5px;
				font-size: 18px;
			}
			.type2{
				margin-left: 10px;
				font-size: 14px;
				
			}
			.type3 {
				width:130px;
			  position: absolute;
			  top: 280px;
			  left: 260px;
			  span {
			    color: #ff3e1d;
			    font-size: 24px;
			  }
			}
		}
	}
	
	//婚庆套餐 同上------------------------------------------------------

	.cartypehq{
		cursor:default;
		width: 1300px;
		padding-top: 10px;
		// height: 30px;
		text-align: center;
		font-size: 40px;
		background-color: aliceblue;
		// color: #3ac257;
		margin: 0 auto;
		line-height: 45px;
		.cartypehq1{
			color: #ff6a84;
		}
		.cartypehq2{
			font-size: 14px;
			color: #a5a59d;
		}
	}//车表
	.carlistshq{
		background-color: aliceblue;
		cursor:default;
		width: 1300px;
		// height: 2000px;
		margin: 0 auto;
		// background-color: #3ac257;
		flex-wrap: wrap;
		display:flex;
		// justify-content: space-between;
		
		.carlisthq:hover {
			box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
			transform: translate(0, -5px);/* 鼠标悬浮时盒子上移10px */
		}
		//单个车box
		.carlisthq{
			width: 378px;
			// background-color: aliceblue;
			margin-bottom: 20px;
			margin-left: 40px;
			position:relative;
			border: 1px solid #d5d2d2;
			transition: all 0.3s;/* 上浮这个过程需要的时间 */
			a{  //车img
				img{
					cursor:pointer;
					width: 378px;
					height: 258px;
				}
			}//车辆型号
			.typehq1{
				margin-left: 10px;
				margin: 5px;
				font-size: 18px;
			}
			.typehq2{
				margin-left: 10px;
				font-size: 14px;
				
			}
			.typehq3{
				width:130px;
				position: absolute;
				top: 280px;
				left: 260px;
				span {
				  color: #ff3e1d;
				  font-size: 24px;
				}
			}
		}
	}
</style>